<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">
            <h:form id="form" enctype="multipart/form-data">
                <br/>
                <h2 class="title">Relatório por Setor e Quadra</h2>
                <p:growl id="messages" showDetail="false" autoUpdate="true"  /> 
                <br/>
                <p:panel id="formPanel" styleClass="container_24 clearfix">

                    <p:panel id="setorPanel" styleClass="container_24 clearfix">

                        <h4 class="title">Setor</h4>

                        <p:outputLabel value="Número" styleClass="grid_3" for="numero" />
                        <p:autoComplete id="numero" styleClass="grid_19"  dropdown="true" converter="setorconverter"
                                        value="#{managerRelatorioSetorQuadra.setor}"
                                        var="setor" itemLabel="#{setor.numero}" itemValue="#{setor}"
                                        scrollHeight="200" forceSelection="true"
                                        completeMethod="#{managerUtilitario.autocompleteSetor}">
                            <p:ajax event="itemSelect" listener="#{managerRelatorioSetorQuadra.atualizarQuadras()}" update=":form:quadraPanel"/>
                        </p:autoComplete>
                    </p:panel>

                    <p:panel id="quadraPanel" styleClass="container_24 clearfix ">

                        <h4 class="title">Quadras</h4>

                        <p:pickList id="pickList" value="#{managerRelatorioSetorQuadra.quadras}" var="q" 
                                    converter="quadraconverter" itemLabel="#{q.numero}" itemValue="#{q}"
                                    showSourceFilter="true" showTargetFilter="true" 
                                    filterMatchMode="contains">

                            <f:facet name="sourceCaption">Disponíveis</f:facet>  
                            <f:facet name="targetCaption">Selecionados</f:facet>  
                        </p:pickList>

                    </p:panel>

                    <div class="buttonAction">

                        <p:commandButton id="adicionarCommandButton" update="@form" 
                                         value="Adicionar" icon="ui-icon-plus"
                                         actionListener="#{managerRelatorioSetorQuadra.adicionarSetorQuadra()}"/>
                    </div>

                    <h4 class="title">Resultado</h4>
                    <p:panel id="resultPanel" styleClass="container_24 clearfix ">

                        <p:dataTable id="quadraTable" var="item" value="#{managerRelatorioSetorQuadra.setoresQuadras}"
                                     styleClass="grid_24" rowIndexVar="rowid"
                                     rows="5" paginator="true"
                                     paginatorTemplate="{FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                                     currentPageReportTemplate="{currentPage} de {totalPages}"
                                     paginatorPosition="bottom" emptyMessage="Nenhum registro encontrado"
                                     style="white-space: pre-wrap;">

                            <f:facet name="header">
                                <p:outputLabel value="Registros #{managerRelatorioSetorQuadra.setoresQuadras.isEmpty() ? '' : '('.concat(managerRelatorioSetorQuadra.setoresQuadras.size()).concat(')')}"/>
                            </f:facet> 
                            <p:column headerText="Ação" width="120">

                                <p:commandButton update="@form" title="Editar" icon="ui-icon-pencil"
                                                 actionListener="#{managerRelatorioSetorQuadra.editarSetorQuadra(item)}"/>

                                <p:commandButton update="@form" title="Excluir"
                                                 oncomplete="dlg.show()" icon="ui-icon-trash">
                                    <f:setPropertyActionListener target="#{managerRelatorioSetorQuadra.removerSetorQuadra}" value="#{item}"/>
                                </p:commandButton>

                            </p:column>

                            <p:column headerText="Setor">
                                <h:outputText value="#{item.setor.numero}"/>
                            </p:column>

                            <p:column headerText="Quadra(s)">
                                <h:outputText value="#{managerRelatorioSetorQuadra.exibirQuadras(item.quadras)}"/>
                            </p:column>

                        </p:dataTable>

                    </p:panel>

                    <br/>
                    <div class="buttonAction">

                        <p:commandButton id="imprimirCommandButton" ajax="false" update="@form" 
                                         widgetVar="imprimir" value="Imprimir" icon="ui-icon-print"
                                         onclick="this.form.target='_blank'"
                                         actionListener="#{managerRelatorioSetorQuadra.imprimirRelatorioPorSetorQuadra}"/>

                        <p:commandButton rendered="false" value="Limpar"
                                         title="Limpar" icon="ui-icon-clean" update="@form"
                                         actionListener="#{managerRelatorioSetorQuadra.init()}"/>
                    </div>
                    <br/><br/>
                </p:panel>

                <p:dialog id="modalDialog" header="Confirmação de remoção" widgetVar="dlg" modal="true" 
                          height="80" closable="false" resizable="false" closeOnEscape="true">

                    <h:outputText value="Tem certeza que deseja remover este registro ?" />

                    <div class="buttonAction">
                        <p:commandButton value="Sim" update="@form"
                                         actionListener="#{managerRelatorioSetorQuadra.removerSetorQuadra()}"
                                         icon="ui-icon-check"/>
                        <p:commandButton value="Não" icon="ui-icon-close"
                                         oncomplete="dlg.hide()" />
                    </div>
                </p:dialog>
            </h:form>
        </ui:define>
    </ui:composition>
</html>
